import { ItemProps } from './props'
import { Menu } from 'ant-design-vue'
import { ItemContentProps } from './props'
import { Icon } from '@/components'

export const MenuItemContent = ({ title, iconName }: ItemContentProps): JSX.Element => {
  return (
    <span>
      {iconName && <Icon name={iconName} />}
      <span>{title}</span>
    </span>
  )
}

export const MenuItem = (props: ItemProps): JSX.Element => {
  const url = { name: props.route == undefined ? '' : props.route }
  return (
    <Menu.Item key={`${props.key}`}>
      <router-link to={url}>
        <MenuItemContent title={props.title} iconName={props.iconName} />
      </router-link>
    </Menu.Item>
  )
}
